<template>
  <div class="hot-author-list">
    <p class="hot-title">热门作者</p>
      <wd-loading
      color="#000000"
      v-if="loading"
      class="loading"
    ></wd-loading>
    <div
      class="hot-author"
      v-for="a in hotAuthorList"
      :key="a.user_id"
    >
      <div class="hot-author-item">
        <div class="pic">
          <img :src="a.web_url">
        </div>
        <div class="text">
          <p>{{a.user_name}}</p>
          <p class="summary">{{a.summary}}</p>
        </div>
      </div>
      <div class="btn">关注</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HotAuthorList",

  data() {
    return {
      hotAuthorList: [],
      loading:true,
    };
  },

  mounted() {
    this.getHotAuthorListData();
  },

  methods: {
    //   获取热门作者列表数据
    getHotAuthorListData() {
      this.$axios
        .get("https://apis.netstart.cn/one/author/hot")
        .then(({ data }) => {
          this.hotAuthorList = data.data;
          console.log(this.hotAuthorList);
          this.$nextTick(()=>{
            this.loading = false;
          })
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.hot-author-list {
  position: fixed;
  top: 42px;
  left: 0;
  bottom: 0px;
  padding-bottom: 50px;
  width: 100vw;
  //   height: 100vh;
  background-color: #fff;
  overflow: auto;
  box-sizing: border-box;

  .hot-title {
    margin: 20px 0 0 10px;
    font-weight: 550;
    // font-size:18px;
  }
  .hot-author {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin: 20px 10px;

    .hot-author-item {
      display: flex;
      align-items: center;
      margin-right: 10px;

      .pic {
        flex: 0 0 40px;
        margin-right: 10px;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        overflow: hidden;
        img {
          display: block;
          width: 100%;
        }
      }
      .text {
        flex: 1;

        .summary {
          width: 250px;
          margin-top: 5px;
          font-size: 12px;
          color: #a19898;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        
        }
      }
    }
    .btn {
      flex: 0 0 45px;
      padding: 5px 0;
      border: 1px solid rgb(27, 27, 27);
      border-radius: 999px;
      text-align: center;
      font-size: 12px;
      font-weight: 500;
    }
  }
}
.loading{
  margin: 0 auto;
}
</style>